<template>
<div>
    <button @click="startTimer">开始计时</button>
    <p>计时:{{ h }}时 {{ m }}分 {{ FS }}秒</p>
</div>
</template>

<script setup>
import {ref, watch, computed} from 'vue'

const h = ref(0)
const m = ref(0)
const s  =ref(0)

const startTimer = () => {
    s.value = 0
    setInterval(() => {
        s.value ++
    }, 1) //setInterval 这样子写可以每隔1000毫秒执行一次 秒 加1
}

//侦听 秒 的变化
watch(s, (newSeconds) => {
    if(newSeconds >= 60){
        s.value = 0
        m.value ++
    }
})

//侦听 分 的变化
watch(m, (newMinutes) => {
    if(newMinutes >= 60){
        m.value = 0
        h.value ++
    }
})

//使用计算属性 让秒 一直显示两位数
const FS = computed(() => {
    if(s.value < 10){
        return '0' + s.value
    }
    else {
        return s.value
    }
})

</script>

<style scoped>
</style>